Hexo+github博客搭建

Posted on | Post modified: | In |
Words count in article: 1.1k

Hexo + github 博客搭建

1. 环境要求

  1. 需要github desktop，可进入github官网下载。

  2. 需要nodejs。可进入nodejs.org 下载LTS版nodejs安装。

    安装好后在命令行（windows在CMD）或gitbash输入，win推荐gitbash，命令和linux差不多。

    1
    2
    node -v
    npm -v

    检查这两个组件是否安装成功。

  3. 为npm配置国内淘宝镜像源（直接下载可能会很慢）

    1
    npm install -g cnpm --registry=https://registry.npm.toobao.org

    完成后可以 cnpm -v检查一下。

    配置过程可能会报错，不要慌，把报错信息复制去搜索一下。我这里网络环境出错了，重新配置和删除了一下代理设置就ok了。

2. hexo配置静态博客

  1. 安装hexo

    1
    cnpm install -g hexo-cli

    使用hexo -v验证。

  2. 创建一个文件夹作为blog的根目录，可以手动创建也可以命令，比如

    1
    mkdir blog

  3. 进入blog这个目录，在该目录下键入

    1
    hexo init

    如果下载或解压过程卡住很久，可以ctrl+c强行终止，然后将该目录下生成的文件全部删除，再来一遍。

  4. 生成完成后，使用hexo -server或hexo -s便可以本地查看效果

    在浏览器中输入本地的4000端口。localhost:4000

  5. 现在来写一篇博客，

    1
    hexo n "my first blog"

    它会在source/_posts目录下生成一篇my first blog.md 文件，这是markdown文件，很简单的一种排版语法。可以进这个目录用vi编辑，可以直接将这个文件打开用markdown软件编辑，编辑好后输入

    1
    2
    3
    hexo clean
    hexo g
    hexo s

    hexo就会帮你生成该博客 ，打开浏览器刷新应该就能看到效果了。

3. 挂载到github

  1. 在github新建仓库，注意仓库名必须是username.github.io形式

  2. 回到gitbash，在blog目录下安装git部署插件

    1
    cnpm install --save hexo-deployer-git

  3. 设置blog下的配置文件_config.yml

    1
    vi _config.yml

更改最下方位置，按上图格式。

  1. 部署到github，回到blog目录，输入hexo d，即可部署到github。

    如果卡住了，可能是因为没有配置gitbash的global身份，或者注意有没有弹出一个登陆窗口，输入git的帐号密码即可。部署成功后，便可以使用git的域名访问自己的博客。

4. 更换博客主题

  可以在hexo官网查找喜欢的主题，github也有人制作开源很多好看的主题，这里以github用的较多的next主题为例，在blog目录下键入命令

1
git clone https://github.com/iissnan/hexo-theme-next.git themes/next

  然后修改_config.yml文件的theme，从landspace改为next 即可。修改后重新生成

1
2
3
hexo clean
hexo g
hexo s

​ 接着便可登陆4000端口查看。

使用hexo d把更改推送到github，然后就可以通过域名访问了，这个更改可能有些延迟，没关系等等即可。这些命令可缩略为一行

1
hexo g -d

5. 基本配置

​ hexo默认不支持markdown的，需要更换渲染引擎

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

​ 更改后还是不行，因为kramed渲染的规则和平常写的还是有区别的，打开\node_modules\kramed\lib\rules\inline.js文件，找到如下条目更改

1
2
3
4
5
6
#escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
escape: /^\\([`*\[\]()#$+\-.!_>])/,
……

#em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

​ 更改后试试有没有效果，不过我用了两个主题都没效果。。。还需要去主题配置文件设置开启Mathjax，以next为例

1
2
3
4
5
6
7
8
vi themes/next/_config.yml

math:
	enable: true
	per_page: true
	engine: mathjax
	
mathjax: true

​ 可以使用vim的搜索找，普通模式下输入/即可。不同的主题可能有所区别，不过大同小异。更改配置文件的时候一定要注意，配置项前面多了个空格都会报错。

​ 其他还有些就是个人信息的配置，可在根目录下的配置文件中查看并配置。

​ 写文章的时候可能有许多图片，而hexo上传的时候不会上传图片的，也可以通过配置asset来上传图片，但这样会让git变大，容量只有300M，所以这里推荐图床来上传，复制链接即可。至此一个blog就大致完成了，可以正常写文章啦，至于优化，美化后面再说了。

Reference

[1] hexo官方文档

[2] 用hexo和github部署博客)